<template>
  <div class="offerInfo">
    <div v-for="(good,index) in formDate.pricing" :key="index" class="goodsList">
      <h2>
        <span>UPC：{{ good.upc }}</span>
        <span>商品名称：{{ good.skuName }}</span>
      </h2>

      <div class="offer">
        <span>
          <span>报价：</span>
          <span>{{ good.price }}元</span>
        </span>
        <span>
          <span>备注：</span>
          <span>{{ good.remark }}</span>
        </span>
      </div>

      <el-table v-if="good.addressList&&good.addressList.length" :data="good.addressList" border>
        <el-table-column prop="mailPerson" label="联系人" width="200" />
        <el-table-column prop="mailTel" label="联系方式" width="200" />
        <el-table-column prop="mailAddress" label="寄样地址" />
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'OfferInfo',
  props: {
    formDate: {
      type: Object,
      default: () => {
        return {
          pricing: []
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.offerInfo{
  .goodsList{
    border-bottom: dashed #ccc 1px;
    padding-top: 10px;
    padding-bottom: 10px;
    &:last-child{
      border-bottom: none;
    }
    h2{
      font-size: 14px;
      height: 40px;
      display: flex;
      align-items: center;
      span{
        margin-right: 20px;
      }
    }
    .offer{
      margin-left: 10px;
      font-size: 14px;
      line-height: 23px;
      padding: 5px 0;
      &>span{
        display: inline-block;
        min-width: 200px;
      }
    }
  }
}
/deep/ .el-table::before{
  height: 0;
}
/deep/ .el-table td,
/deep/ th.is-leaf{
  font-weight: 400;
  color: #606266;
  padding: 5px 0;
}
</style>
